<template>
  <!-- 17、所有页面添加骨架屏效果 -->
  <van-skeleton title :row="3" />
  <!-- 4、登录页布局排版还原 -->
  <div class="login">
    <p class="jing">京东登录注册</p>
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="fromInfo.phone"
          name="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
          @input="oninput"
        />
        <van-field
          v-model="fromInfo.password"
          type="password"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        >
          <template #button> |&emsp;忘记密码 </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          block
          :disabled="disabled"
          color="#ea2c2c"
          native-type="submit"
        >
          登录
        </van-button>
      </div>
    </van-form>
    <p class="duan">
      <span class="duan1">短信验证码登录</span>
      <span class="duan2">手机快速注册</span>
    </p>
    <img src="../assets/login.png" alt="" />
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import axios from '@/request/index'
import { useRouter } from 'vue-router'
import { useCounterStore } from '@/store/index'

const store = useCounterStore()
const router = useRouter()
const fromInfo = reactive({
  phone: "",
  password: "",
});
const disabled = ref(true);
// 5、校验手机号密码必填且手机号为11位数字，校验通过登录按钮才能点击，否则不可点击
const oninput = () => {
  if (/^1[3-9]\d{9}$/.test(fromInfo.phone)) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
};
// 6、点击登录调用登录接口获取用户信息和token，使用pinia存储并持久化缓存，并跳转我的页面
const onSubmit = () => {
  axios.post('/getlogin',{
    phone:fromInfo.phone,
    password:fromInfo.password
  }).then(res=>{
    // console.log(res);
    store.setUser(res)
    router.push('/my')
  })
};
</script>
<style scoped lang='scss'>
.login {
  .jing {
    text-align: center;
  }
  .duan {
    color: #33333386;
    .duan1 {
      margin-left: 20px;
    }
    .duan2 {
      margin-left: 125px;
    }
  }
  img {
    width: 90%;
    margin-left: 20px;
    margin-top: 50px;
  }
}
</style>